<template>
  <Modal v-model="getShowModal" width="500" @on-cancel="onCancelFunc" :mask-closable="false">
    <div style="margin-top: 15px; height: 300px">
      <Transfer
        :data="allUsers"
        :target-keys="targetKeys2"
        :titles="['所有成员','已在用户组成员']"
        filterable
        :filter-method="filterMethod"
        @on-change="handleChange2"></Transfer>
    </div>
    <diV slot="footer">
      <Button type="primary" @click="onOkFunc" >提交</Button>
    </diV>
  </Modal>
</template>
<script>
import {getAllUser} from '@/api/user.js'
import {modifyGroupMembers} from '@/api/group.js'
import {getVO} from '@/common/proto-vo.js'
export default {
  props: ['showModal', 'gid'],
  data () {
    return {
      selected: [],
      defalutSelected: [],
      hasChangeSelected: false,
      allUsers: [],
      targetKeys2: []
    }
  },
  created () {
    this.getAllUsers()
  },
  methods: {
    getAllUsers () {
      getAllUser().then((data) => {
        if (!data) {
          return []
        }
        let ManagerVO = getVO('ManagerVO')
        let pv = data.data.data
        let len = pv.data.length
        let users = []
        for (let i = 0; i < len; i++) {
          let vo = ManagerVO.decode(pv.data[i])
          let keys = 'uid-' + vo.uid.toString() + '-' + vo.gid.toString()
          users.push({
            key: keys, label: vo.userName + '===uid:' + vo.uid.toString(), uid: vo.uid.toString()
          })
        }
        console.log('users:', users)
        this.allUsers = users
      })
    },
    handleChange2 (newTargetKeys) {
      console.log('newTargetKeys:', newTargetKeys)
      this.targetKeys2 = newTargetKeys
    },
    filterMethod (data, query) {
      return data.label.indexOf(query) > -1
    },
    onOkFunc (name) {
      let uIds = this.targetKeys2
      console.log('uIds:', uIds)
      let sendIds = ''
      for (var i = 0; i < uIds.length; i++) {
        let data = uIds[i].split('-')
        sendIds = sendIds + data[1]
        if (i < uIds.length - 1) {
          sendIds = sendIds + ','
        }
      }

      console.log('sendIds:', sendIds)
      modifyGroupMembers(this.gid, sendIds).then((data) => {
        if (!data) {
          return
        }
        let pv = data.data.data
        let success = pv.intValues[0]
        if (success === 1) {
          this.getAllUsers()
          this.$Message.info('修改组成员成功')
        }

        this.$emit('closeEditGroupMembersModel')
      }).catch(console.log('catch'))
    },
    onCancelFunc () {
      this.$emit('closeEditGroupMembersModel')
    }
  },
  computed: {
    getTargetKeys () {
      let keys = []
      if (this.allUsers) {
        keys = this.allUsers.filter((item) => ('uid-' + item.uid + '-' + this.gid) === item.key).map(item => item.key)
      }

      console.log('keys:', keys)
      return keys
    },
    getShowModal () {
      console.log('getShowModal')
      // if (this.showModal) {
      console.log('this.showModal :', this.showModal)
      // this.allUsers = this.getAllUsers()
      console.log('this.getTargetKeys :', this.getTargetKeys)
      this.targetKeys2 = this.getTargetKeys
      // }
      return this.showModal
    }
  }
}
</script>

<style>
.right-table{
  float: right;
}
.left-table{
  float: left;
}
</style>
